<template>
	<div class="project-chartBox">
		<div id="manageChart"></div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";
import { changeNumToWan } from "../../utils/handelScreen";

let xArr = ref(["项目总投资金额", "项目总收入", "项目总支出", "项目总利润"]);
let yArr = ref([
	{
		value: 0,
		itemStyle: {
			color: {
				x: 0, //右
				y: 1, //下
				x2: 0, //左
				y2: 0, //上
				colorStops: [
					{
						offset: 0,
						color: "rgba(20,197,231,0)",
					},
					{
						offset: 1,
						color: "#14C5E7",
					},
				],
			},
		},
	},
	{
		value: 0,
		itemStyle: {
			color: {
				x: 0, //右
				y: 1, //下
				x2: 0, //左
				y2: 0, //上
				colorStops: [
					{
						offset: 0,
						color: "rgba(25,120,229,0.1)",
					},
					{
						offset: 1,
						color: "#1978E5",
					},
				],
			},
		},
	},
	{
		value: 0,
		itemStyle: {
			color: {
				x: 0, //右
				y: 1, //下
				x2: 0, //左
				y2: 0, //上
				colorStops: [
					{
						offset: 0,
						color: "rgba(25,120,229,0.1)",
					},
					{
						offset: 1,
						color: "#1978E5",
					},
				],
			},
		},
	},
	{
		value: 0,
		itemStyle: {
			color: {
				x: 0, //右
				y: 1, //下
				x2: 0, //左
				y2: 0, //上
				colorStops: [
					{
						offset: 0,
						color: "rgba(25,120,229,0.1)",
					},
					{
						offset: 1,
						color: "#1978E5",
					},
				],
			},
		},
	},
]);
let pictorialArr = ref([]);
let options = reactive({
	grid: {
		top: "12%",
		bottom: "19%",
		right: "8%",
		// left: "0%",
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "line",
			lineStyle: {
				type: "solid",
				width: 40,
				color: "rgba(216,240,255,0.1)",
			},
		},
		showContent: false,
	},
	xAxis: {
		type: "category",
		data: xArr.value,
		// // 轴线
		axisLine: {
			color: "rgba(176,215,255,0.4)",
		},
		//刻度
		axisTick: {
			show: false,
		},
		// 刻度标签
		axisLabel: {
			color: "#D8F0FF",
			interval: 0,
		},
	},
	yAxis: {
		type: "value",
		axisLabel: {
			show: false,
		},
		axisLine: {
			show: false,
		},
		splitLine: {
			lineStyle: {
				color: "rgba(176,215,255,0.25)",
				type: "dashed",
			},
		},
	},
	series: [
		{
			data: yArr.value,
			type: "bar",
			barWidth: 25,
			emphasis: {
				label: {
					show: true,
					position: "top",
					color: "#D8F0FF",
					textShadowColor: "#3FBFFF",
					textShadowBlur: 2,
					formatter: (params) => {
						// console.log(params);
						return params.value + "万元";
					},
				},
			},
			// zlevel: 0,
			z: 0,
		},
		{
			type: "pictorialBar",
			symbol: "rect",
			symbolRepeat: "fixed",
			symbolSize: [25, 2],
			symbolMargin: 4,
			symbolClip: true,
			data: pictorialArr.value,
			itemStyle: {
				color: "#081736",
			},
			symbolPosition: "end",
			// zlevel: 1,
			z: 1,
		},
	],
});
let manageChartRef = null;
let initManageChartData = (v = {}) => {
	const { invest = 0, income = 0, expenditure = 0, profit = 0 } = v;
	yArr.value[0].value = changeNumToWan(invest);
	yArr.value[1].value = changeNumToWan(income);
	yArr.value[2].value = changeNumToWan(expenditure);
	yArr.value[3].value = changeNumToWan(profit);
	// 象形图数据
	pictorialArr.value[0] = changeNumToWan(invest);
	pictorialArr.value[1] = changeNumToWan(income);
	pictorialArr.value[2] = changeNumToWan(expenditure);
	pictorialArr.value[3] = changeNumToWan(profit);
	manageChartRef.setOption(options);
};
const initManageChart = (v) => {
	if (!manageChartRef)
		manageChartRef = echarts.init(document.getElementById("manageChart"));
	initManageChartData(v);
};
let resizeChart = () => {
	manageChartRef.resize();
};
defineExpose({
	initManageChart,
	resizeChart,
});
</script>
<style lang="scss" scoped>
.project-chartBox {
	width: 100%;
	height: 100%;
	#manageChart {
		width: 100%;
		height: 100%;
	}
}
</style>
